<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
    <title>HTML5拖拽上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style type="text/css">
        #dropzone {
            width: 300px;
            height: 300px;
            border: 2px dashed gray;
        }

        #dropzone.over {
            width: 300px;
            height: 300px;
            border: 2px dashed red;
        }
    </style>
</head>

<body>
<div id="dropzone" dropEffect="link"></div>
</body>
<script type="text/javascript">
    function uploadFile(formData) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:8080/Server/uploadfile', true);
        xhr.send(formData);
    }
    var dz = document.getElementById('dropzone');
    dz.ondragover = function(ev) {
        //阻止浏览器默认打开文件的操作
        ev.preventDefault();
        this.className = 'over';
    }

    dz.ondragleave = function() {
        this.className = '';
    }

    dz.ondrop = function(ev) {
        this.className = '';
        //阻止浏览器默认打开文件的操作
        ev.preventDefault();
        //表单上传文件
        var formData = new FormData();
        formData.append('file', ev.dataTransfer.files[0]);
        uploadFile(formData);
    }
</script>

</html>